import {deepFullCopy, messages} from "share/common";
import React from 'react';
import {connect} from 'react-redux';
import { Modal, Table, message, Button, Popconfirm, Popover, Badge,Tabs } from 'antd'
const TabPane = Tabs.TabPane;
import BSService from 'containers/basic-data/bank-definition/bank-definition.service';
import SearchArea from 'components/search-area';
class BankPicker extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: true,
      page: 0,
      pageSize: 10,
      selectedData: [],  //已经选择的数据项
      selectorItem: {},  //当前的选择器类型数据项, 包含url、searchForm、columns
      //点击顶部搜索时要参数
      searchParams: {
        bankBranchName: "",
        openAccount: '',
        bankCode: '',
        bankName: '',
      },
      label: "commonBank",
      tabs: [
        {key: 'commonBank', name: messages('financial-management.key297'/*通用银行*/)}, /*通用银行*/
        {key: 'customBank', name: messages('financial-management.key296'/*自定义银行*/)}, /*自定义银行*/
      ],
      searchForm: [
        {
          type: 'list',
          id: 'bankName',
          label: messages('financial-management.key770')/*选择银行*/,
          listType: 'select_parent_bank',
          labelKey: 'bankName',
          valueKey: 'bankName',
          single: true
        },
        {type: 'input', id: 'bankBranchName', label:messages('financial-management.key299'/*支行名称*/)}, /*支行名称*/
        {type: 'input', id: 'bankCode', label:messages('financial-management.key298'/*银行代码*/)}, /*银行代码*/
        {type: 'input', id: 'openAccount', label:messages('financial-management.key300'/*开户地*/)}, /*开户地*/
      ],
      pagination: {
        current: 1,
        page: 0,
        total: 0,
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      data:[],
      // 自定义银行表格
      customBankColumns:[
        {
          /*国家*/
          title: messages('financial-management.key301'/*国家*/), key: "countryName", dataIndex: 'countryName', width: '10%',
          render: desc => <span>{desc ? <Popover placement="topLeft" content={desc}>{desc}</Popover> : '-'}</span>
        },
        {
          /*银行代码*/
          width: '15%',
          title: messages('financial-management.key302'/*银行代码*/), key: "bankCode", dataIndex: 'bankCode',
          render: desc => <span>{desc ? <Popover placement="topLeft" content={desc}>{desc}</Popover> : '-'}</span>
        },
        {
          /*银行名称*/
          title: messages('financial-management.key303'/*银行名称*/), key: "bankName", dataIndex: 'bankName',
          render: desc => <span>{desc ? <Popover placement="topLeft" content={desc}>{desc}</Popover> : '-'}</span>
        },
        {
          /*支行名称*/
          title: messages('financial-management.key304'/*支行名称*/), key: "bankBranchName", dataIndex: 'bankBranchName',
          render: desc => <span>{desc ? <Popover placement="topLeft" content={desc}>{desc}</Popover> : '-'}</span>
        },
        {
          /*开户地*/
          title: messages('financial-management.key305'/*开户地*/), key: "openAccount", dataIndex: 'openAccount',
          render: desc => <span>{desc ? <Popover placement="topLeft" content={desc}>{desc}</Popover> : '-'}</span>
        },
        {
          /*详细地址*/
          title: messages('financial-management.key306'/*详细地址*/), key: "detailAddress", dataIndex: 'detailAddress',
          render: desc => <span>{desc ? <Popover placement="topLeft" content={desc}>{desc}</Popover> : '-'}</span>
        }
      ],
      // 通用银行表格
      commonBankColumns: [
        {
          /*国家*/
          title: messages('financial-management.key301'/*国家*/), key: "countryName", dataIndex: 'countryName', width: '10%',
          render: desc => <span>{desc ? <Popover placement="topLeft" content={desc}>{desc}</Popover> : '-'}</span>
        },
        {
          /*银行代码*/
          width: '15%',
          title: messages('financial-management.key302'/*银行代码*/), key: "bankCode", dataIndex: 'bankCode',
          render: desc => <span>{desc ? <Popover placement="topLeft" content={desc}>{desc}</Popover> : '-'}</span>
        },
        {
          /*银行名称*/
          title: messages('financial-management.key303'/*银行名称*/), key: "bankName", dataIndex: 'bankName',
          render: desc => <span>{desc ? <Popover placement="topLeft" content={desc}>{desc}</Popover> : '-'}</span>
        },
        {
          /*支行名称*/
          title: messages('financial-management.key304'/*支行名称*/), key: "bankBranchName", dataIndex: 'bankBranchName',
          render: desc => <span>{desc ? <Popover placement="topLeft" content={desc}>{desc}</Popover> : '-'}</span>
        },
        {
          /*开户地*/
          title: messages('financial-management.key305'/*开户地*/), key: "openAccount", dataIndex: 'openAccount',
          render: desc => <span>{desc ? <Popover placement="topLeft" content={desc}>{desc}</Popover> : '-'}</span>
        },
        {
          /*详细地址*/
          title: messages('financial-management.key306'/*详细地址*/), key: "detailAddress", dataIndex: 'detailAddress',
          render: desc => <span>{desc ? <Popover placement="topLeft" content={desc}>{desc}</Popover> : '-'}</span>
        }
      ],
      columns:[]
    };
  }

  handleRowClick = (record) =>{
    this.props.onChoose(record);
    this.props.onCancel()
  };

  componentWillMount() {
    let {customBankColumns} = this.state;
    this.setState({
      columns: customBankColumns
    });
    this.getList();
  }

  renderTabs() {
    return (
      this.state.tabs.map(tab => {
        return <TabPane tab={tab.name} key={tab.key}/>
      })
    )
  }

  //获取公司下的银行数据
  getList() {
    this.setState({loading: true});
    let params = this.state.searchParams;
    if(Object.prototype.toString.call(params.bankName)==="[object Array]"){
      params.bankName = params.bankName[0];
    }
    let ps = {
      page: this.state.pagination.page,
      size: this.state.pagination.pageSize
    };
    if (this.state.label === 'customBank') {
      BSService.getSelfBankList(params,ps)
        .then((response) => {
          let pagination = this.state.pagination;
          pagination.total = Number(response.headers['x-total-count']);
          this.setState({
            loading: false,
            data: response.data,
            pagination
          });
        })
    } else {
      BSService.getSystemBankList(params,ps)
        .then((response) => {
          let pagination = this.state.pagination;
          pagination.total = Number(response.headers['x-total-count']);
          this.setState({
            loading: false,
            data: response.data,
            pagination
          });
        })
    }
  }

  //分页点击
  onChangePager = (pagination, filters, sorter) => {
    this.setState({
      pagination: {
        current: pagination.current,
        page: pagination.current - 1,
        pageSize: pagination.pageSize,
        total: pagination.total
      }
    }, () => {
      this.getList();
    })
  };

  handleSearch = (params) => {
    this.setState({
      searchParams: params,
      loading: true,
      page: 0,
      pagination: {
        page: 0,
        pageSize: 10,
      }
    }, () => {
      this.getList();
    })
  };

  //Tabs点击
  onChangeTabs = (key) => {
    this.formRef.setValues({
      bankCode:  '',
      bankBranchName:  '',
      openAccount: '',
    });
    let {columns, commonBankColumns, pagination,customBankColumns } = this.state;
    if (key === 'customBank') {
      columns =  customBankColumns
    }else {
      columns =  commonBankColumns
    }
    pagination.page = 0;
    pagination.pageSize = 10;
    pagination.current = 1;
    this.setState({
      loading: true,
      pagination,
      data: [],
      label: key,
      columns: columns
    }, () => {
      this.clear()
    });
  };

  clear = () =>{
    this.setState({
      searchParams:{
        bankBranchName:'',
        openAccount: '',
        bankCode: '',
        bankName: '',
      }
    },() => {
      this.getList()
    })
  };

  render()
  {
    const {visible,onCancel} = this.props;
    const {data,columns,pagination,loading,searchForm} = this.state;

    return (
      <Modal  visible={visible}  width={800} className="list-selector" onCancel={onCancel}>
        <Tabs onChange={this.onChangeTabs}>
          {this.renderTabs()}
        </Tabs>
        <SearchArea searchForm={searchForm}
                    submitHandle={this.handleSearch}
                    clearHandle={this.clear}
                    wrappedComponentRef={(inst) => this.formRef = inst}/>
        <div className="table-header">
          <div className="table-header-title">{messages('common.total', {total: `${pagination.total}`})}</div>
        </div>
        <Table dataSource={data}
               columns={columns}
               loading={loading}
               pagination={pagination}
               onChange={this.onChangePager}
               bordered
               size='middle'
               rowKey='key'
               onRow={record => ({
                 onClick: () => this.handleRowClick(record)
               })}/>
      </Modal>
    );
  }
}
BankPicker.propTypes = {
  visible: React.PropTypes.bool,  //对话框是否可见
  onOk: React.PropTypes.func,  //点击OK后的回调，当有选择的值时会返回一个数组
  onCancel: React.PropTypes.func,  //点击取消后的回调
  onChoose: React.PropTypes.func,  //点击选择银行
};
function mapStateToProps(state) {
  return {
    organization: state.budget.organization,
    company: state.login.company,
    language: state.main.language,
    tenantMode: state.main.tenantMode
  }
}
export default connect(mapStateToProps)(BankPicker);
